<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>发布</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <link rel="stylesheet" href="/sunfc/css/weui.css">
    <link rel="stylesheet" href="/sunfc/css/jquery-weui.css">
    <link rel="stylesheet" href="/sunfc/css/style.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=fc8d203edc94af7f4fe3a3f02fb99a74"></script>

    <style type="text/css">
        .picker-button{font-size: 15px;}
    </style>
</head>
<body class="back1">

<div class="index-top">
    <div class="index-back" onclick="tt();">
        <img src="/sunfc/images/back.png" width="15">
    </div>
    <script>
        function tt() {
            window.location.href="{:url('index/sunfc.passenger/index')}";
        }
    </script>
    <p class="index-title">发布行程</p>
</div>

<!-- 这里写内容 -->
<div style="margin-top: 45px;">
</div>
<form action="{:url('sunfc.passenger/wait_order')}" method="post" >
<div class="index-box release-cont">
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <span class="dian"></span>
            </div>
            <div class="weui-cell__bd">
                <p class="f15 open-popup" id="addressStart">
                    {if condition="$data.region eq 0"}
                    <input value="{$data['begin_detail']}" name="begin_detail" readonly style="width: 100%">
                    {else /}
                    <input value="{$data['begin_place']}{$data['begin_detail']}" readonly style="width: 100%">
                    <input type="hidden" id="begin_detail" name="begin_detail" value="{$data['begin_detail']}">
                    {/if}
                    <input type="hidden" id="begin_place" value="{$data['begin_place']}" name="begin_place" style="width: 100%">
                </p>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <span class="dian2"></span>
            </div>
            <div class="weui-cell__bd">
                <p class="f15 open-popup" id="addressEnd">
                    {if condition="$data.region eq 0"}
                    <input value="{$data['end_detail']}" name="end_detail" readonly style="width: 100%">
                    {else /}
                    <input value="{$data['end_place']}{$data['end_detail']}"style="width: 100%">
                    <input type="hidden" id="end_detail" name="end_detail" value="{$data['end_detail']}">
                    {/if}
                    <input type="hidden" id="end_place" value="{$data['end_place']}" name="end_place" readonly>
                </p>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <img class="mr5" src="/sunfc/images/wait.png" width="8">
            </div>
            <div class="weui-cell__bd">
                <p class="weui-input f15" id="time-format" class="depart_time" >
                    出发时间
                </p>
            </div>
        </div>
        <div class="weui-cell cxyq">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <img class="mr5" src="/sunfc/images/user2.png" width="8">
                </div>
                <div class="weui-cell__bd">
                    <p class="weui-input open-popup f15" id="half22" data-target="#half2">
                        <input name="number" placeholder="乘车人数" class="number" style="outline: none" readonly>
                    </p>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <img class="mr5" src="/sunfc/images/yaoqiu.png" width="8">
                </div>
                <div class="weui-cell__bd">
                    <p class="weui-input open-popup f15" id="cxyqPop1" data-target="#cxyqPop">
                        <input type="text" id="beizhuValue" name="content" placeholder="出行要求" style="outline: none" readonly>
                    </p>
                </div>
            </div>

        </div>
    </div>
</div>
<div id="travelPopupBox" style="display: none;">
    <div class="travelPopupS"></div>
    <div class="travelPopup">默认由车主选择路线并承担高速费<br>如你要求走高速，请注明</div>
</div>

<div class="release-bottom">
    <div class="index-box" style="margin-bottom: 10px;">
        <div class="bx">
            <p>保险：5<span class="small">元/人</span></p>
            <p class="" style="font-size:12px;color: #b3b3b3;margin-top: 10px;">全面的贴心保障，让您的出行后顾无忧。</p>
        </div>
    </div>
    <a class="weui-btn qrfb-btn" onclick="fb()">确认发布</a>
    <input type="submit" value="确认发布" class="weui-btn qrfb-btn" id="qrfb_submit" style="display: none;">
</div>

<!-- 乘车人数popup -->
<div id="half2" class="weui-popup__container popup-bottom popup-people">
    <div class="weui-popup__modal">
        <div class="toolbar f15">
            <div class="toolbar-inner">
                <a href="javascript:;" class="picker-button close-popup" id="okFonPeople">完成</a>
                <h1 class="title f15">乘车人数</h1>
            </div>
        </div>
        <div class="modal-content" >
            <div class="weui-cells f15 ccPeople">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="price">成人

                            <label class="weui-cell weui-check__label" for="preWoman">
                                <div class="weui-cell__hd weui-cells_checkbox">
                                    <input type="checkbox" class="weui-check" name="checkbox1" id="preWoman">
                                    <i class="weui-icon-checked" style="margin-left: -5px;"></i>

                                </div>
                                <div class="weui-cell__bd">
                                    <p class="fs12">有孕妇</p>
                                </div>
                            </label>

                        </div>
                    </div>
                    <div class="weui-cell__ft">
                        <div class="quantity">
                            <a href="javascript:void(0);" class="subtract ca weui-count__decrease" id="adult">-</a><input type="tel" value="1" class="nums weui-count__number" id="nums1" vtype="adult"><a href="javascript:void(0);" class="plus weui-count__increase">+</a>
                        </div>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="price">儿童<span class="fs12"> 4-12岁</span></div>
                    </div>
                    <div class="weui-cell__ft">
                        <div class="quantity">
                            <a href="javascript:void(0);" class="subtract ca weui-count__decrease">-</a><input type="tel" value="0" class="nums weui-count__number" id="nums2"  vtype="children"><a href="javascript:void(0);" class="plus weui-count__increase">+</a>
                        </div>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="price">婴幼儿<span class="fs12"> 0-3岁</span></div>
                    </div>
                    <div class="weui-cell__ft">
                        <div class="quantity">
                            <a href="javascript:void(0);" class="subtract ca weui-count__decrease">-</a><input type="tel" value="0" class="nums weui-count__number" id="nums3" vtype="infant"><a href="javascript:void(0);" class="plus weui-count__increase">+</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 出行要求 -->
<div id="cxyqPop" class="weui-popup__container popup-bottom popup-people">
    <div class="weui-popup__modal">
        <div class="toolbar f15">
            <div class="toolbar-inner">
                <a href="javascript:;" class="picker-button close-popup" id="okFonChuxing">完成</a>
                <h1 class="title f15">出行要求</h1>
            </div>
        </div>
        <div class="modal-content travelRequ">
            <div class="dengpao">
                <img src="/sunfc/images/dengpao.png" width="10">
                <p>填写下列信息，方便车主与您沟通</p>
            </div>
            <div class="beizhu" id="beizhu">
                <a href="javascript:;" vcode="0">有宠物</a>
                <a href="javascript:;" vcode="1">有大件行李</a>
                <a href="javascript:;" vcode="2">需走高速，高速费由我承担</a>
            </div>
            <a href="javascript:;" class="weui-btn weui-btn_primary qrtj-btn" id="qrtj-btn">无特殊要求</a>
        </div>
    </div>
</div>

    <input type="hidden" id="region" name="region" value="{$data['region']}">
    <input type="hidden" id="lonlat_begin" name="lonlat_begin" value="{$data['lonlat_begin']}">
    <input type="hidden" id="lonlat_end" name="lonlat_end" value="{$data['lonlat_end']}">
    <input type="hidden" id="number_info" name="number_info">
    <input type="hidden" id="content_con" name="content" value="">
    <input type="hidden" id="depart_time" name="depart_time">
</form>
<script src="/sunfc/js/jquery.min.js"></script>
<script src="/sunfc/js/jquery-weui.min.js"></script>
<script src="/sunfc/js/store.js"></script>
<script>
    // 计算人数
    var MAX = 4, MIN = 1, MIN2 = 0;
    $('.weui-count__decrease').click(function (e) { // 最小为0时
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") - 1;
        if (number < MIN2) number = MIN2;
        if (number == MIN2) $(e.currentTarget).parent().find('.weui-count__decrease').addClass("ca");
        $input.val(number);
        $('.weui-count__increase').removeClass("ca");
    });
    $('#adult').click(function (e) { // 最小为1时
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") - 1;
        if (number < MIN) {
            number = MIN;
            $(e.currentTarget).parent().find('.weui-count__decrease').addClass("ca");
            $.toast("至少1位成人乘客", "text");
        }
        $input.val(number);
        $('.weui-count__increase').removeClass("ca");
    });
    $('.weui-count__increase').click(function (e) { // 加
        var nums = parseInt($("#nums1").val()) + parseInt($("#nums2").val()) + parseInt($("#nums3").val());
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") + 1;
        $(e.currentTarget).parent().find('.weui-count__decrease').removeClass("ca");
        if (number > MAX) {
            $input.val(MAX);
            $.toast("最多4人乘车", "text");
            console.log($(this).attr("class"));
            return false;
        }
        if (number == MAX || MAX - nums == 1) $(".weui-count__increase").addClass("ca");
        if (MAX - nums > 0) $input.val(number);
        else $.toast("最多4人乘车", "text");
    });
    var date = new Date();
    var month = date.getMonth()+1;
    // 出发时间
    $("#time-format").datetimePicker({
        toolbarCloseText: '下一步',
        title: '出发时间',
        yearSplit: '',
        monthSplit: '月',
        dateSplit: '日',
        years: function () {
            return [{values:""}]
        },
        monthes: [month, month+1], //当前和下个月份
        times: function () {
            return [  // 自定义的时间
                {
                    values: (function () {
                        var hours = [];
                        for (var i=0; i<24; i++) hours.push(i > 9 ? i : '0'+i);
                        return hours;
                    })()
                },
                {
                    divider: true,  // 这是一个分隔符
                    content: ':'
                },
                {
                    values: (function () {
                        var minutes = [];
                        for (var i=0; i<59; i++){
                            minutes.push(i > 9 ? i : '0'+i);
                        }
                        return minutes;
                    })()
                },
                {
                    divider: true,  // 这是一个分隔符
                    content: ''
                }
            ];
        },
        onChange: function (picker, values, displayValues) {
            console.log(values);
            var time=values['0']+'-'+values['1']+'-'+values['2']+' '+values['3']+':'+values['4'];
            //赋值
            $('#depart_time').val(time);
            console.log(time);
            //拿到显示数据并展示数据
            $("#time-format").text(values['1']+'月'+values['2']+'日 '+values['3']+':'+values['4']);
        },
        onClose: function (picker, values, displayValues){
            console.log(picker+'++'+values+"=="+displayValues);
        }
    });
    // 选择时间后下一步
    $(document).on("click",".close-picker",function(){
        if($("#half22").find(".number")){
            $("#half22").click();
        }
        // if($("#half22").text() == "乘车人数"){
        //     $("#half22").click();
        // }
    });

    // 乘车人数计算
    $(document).on("click","#okFonPeople",function(){
        var nums = parseInt($("#nums1").val()) + parseInt($("#nums2").val()) + parseInt($("#nums3").val());
        console.log(nums);
        $('.number').val(nums);
        $("#half22").text(nums+"人");
        var a = parseInt($("#nums1").val())+'-'+parseInt($("#nums2").val())+'-'+parseInt($("#nums3").val());
        $('#number_info').val(a);
        console.log($('#number_info').val());

        // 出行要求提示定时 显示隐藏
        $("#travelPopupBox").show();
        var t=setTimeout(function(){
            $("#travelPopupBox").hide();
        },5000);
    });

    // 出行要求
    var beizhuVal = [];// 存放出行要求的数组
    var content = [];
    $.each($("#beizhu a"),function(k,v){
        $(v).click(function(){
            if($(this).hasClass("cur")){
                $(this).removeClass("cur");
                for(i in beizhuVal){
                    if($(this).attr("vcode") == beizhuVal[i]){
                        beizhuVal.splice(i, 1);
                        content.splice(i, 1);
                    }
                }
            }else{
                $(this).addClass("cur");
                beizhuVal.push($(this).attr("vcode"));
                content.push($(this)[0].innerText);

            }
            $("#beizhuValue").val(beizhuVal);
            if (beizhuVal.length > 0) {
                $("#qrtj-btn").text("确认添加");
            }else{
                $("#qrtj-btn").text("无特殊要求");
            }
            $('#content_con').val(content);
            console.log($('#content_con').val());
        });
    });
    $(document).on("click","#qrtj-btn",function(){
        $("#okFonChuxing").click();
    });
    $(document).on("click","#okFonChuxing",function(){
        if (beizhuVal.length > 0) {
            $("#cxyqPop1").text("已添加");
        }
    });
    //是否为孕妇
    var sIsDefault = 0;
    $('#preWoman').click(function () {
        if ($("#preWoman").prop("checked") == true) {
            sIsDefault = 1;
        }else{
            sIsDefault = 0;
        }
        console.log(sIsDefault);
    })
    function fb() {
        if (sIsDefault==1){
            $('#content_con').val($('#content_con').val()+"|有孕妇");
        } else {
            $('#content_con').val();
        }
        // 判断时间
        var myday = new Date(Date.parse($("#depart_time").val() .replace(/-/g,"/")));
        var curDate=new Date();
        if(myday <= curDate){
            $.alert("请重新选择出发时间！");
            return false;
        }
        // 提交前判断空
        if($("#depart_time").val() == "" || $("#number_info").val() == ""){
            $.alert("发布行程信息请填写完整！");
        }else{
            $("#qrfb_submit").click();
        }
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

</body>
</html>

